<template>
	<view :style="{width: props.width}" class="change-btn" @tap="showPopup">
		换个背景
	</view>
	<u-popup v-model="show" mode="bottom" safe-area-inset-bottom close-icon :mask-close-able="false" border-radius="8">
		<view class="title">背景选择</view>
		<scroll-view class="bg-picker" :scroll-x="true" :enable-flex="true" style="align-items: center;">
			<view class="picker-item-container">
				<view v-for="(bg, index) in images" :class="`bg-item ${bg === currentBg ? 'acitve' : ''}`" :key="index">
					<image :lazy-load="true" :src="bg" @click="selectBg(bg)" style="height: 110rpx;" mode="heightFix" />
				</view>
				<view :class="`bg-item ${bg === currentBg ? 'acitve' : ''}`" v-for="(bg, index) in colors" :key="index"
					@click="selectBg(bg)" :style="{ background: `${bg}` }" />
			</view>
		</scroll-view>
		<view class="btns">
			<view class="confirm" @click="confirm">选中</view>
			<view class="confirm" @click="close">取消</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import { ref, defineEmits, defineProps, watch } from "vue";
	import { DEFAULT_COLORS, DEFAULT_IMAGES } from "./config";

	const vk = uni.vk;

	const emit = defineEmits(["update:modelValue"]);
	const props = defineProps({
		modelValue: {
			type: String,
			default: ref('')
		},
		images: {
			type: Array,
			default: () => DEFAULT_IMAGES
		},
		colors: {
			type: Array,
			default: () => DEFAULT_COLORS
		},
		width: {
			type: String,
			default: '320rpx'
		}
	})

	const show = ref(false);

	const showPopup = () => {
		show.value = true;
	}

	const currentBg = ref(props.modelValue);

	const close = () => {
		show.value = false;
	}

	const confirm = () => {
		emit('update:modelValue', currentBg.value);
		close();
	}

	let selectBg = (bg : string) => {
		currentBg.value = bg;
	}
</script>

<style scoped lang="scss">
	.change-btn {
		font-size: 24rpx;
		padding: 18rpx 0;
		text-align: center;
		color: #ffffff;
		background: #70b9fd;
		opacity: 0.8;
		border-radius: 6px;
		box-shadow: 1px 1px 4px 1px #dddddd;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	}

	.title {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.btns {
		display: flex;
		margin-top: 10rpx;
		border-top: 1px solid #f1f1f1;

		:first-child {
			border-right: 1px solid #f1f1f1;
		}
	}

	.confirm {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.bg-picker {
		display: flex;
		flex-direction: row;
		height: 250rpx;
		align-items: center;

		.picker-item-container {
			display: flex;
			flex-direction: row;
			align-items: center;
			white-space: nowrap;
			height: 100%;
		}

		.bg-item {
			margin: 0 5rpx;
			height: 110rpx;
			width: 110rpx;
			position: relative;
			border: 1px solid #f1f1f1;
			z-index: 1;
			display: inline-block;
		}

		.acitve {
			box-shadow: 0px 0px 2px 2px #ffca6b;
			z-index: 2;
		}
	}
</style>